<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>登录</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css" >
	<link rel="stylesheet"  href="css/me.css" >
</head>
<body>
	<br />
	<br />
	<div class="m-container-small m-padded-tb-massive" style="max-width: 30em !important;">
		<div class="ui container">
			<div class="ui middle aligned center aligned grid">
				<div class="column">
					<h2 class="ui teal image header">

						<div class="content">
							欢迎回来
						</div>
					</h2>
					<form id="app" name="app" class="ui large form">
						<div class="ui stacked segment">
							<div class="field">
								<div class="ui left icon input">
									<i class="user icon"></i>
									<input type="text" id="username" name="username" placeholder="账号">
								</div>
							</div>
							<div class="field">
								<div class="ui left icon input">
									<i class="lock icon"></i>
									<input type="password" id="password" name="password" placeholder="密码">
								</div>
							</div>
							<div class="field" style="display:none;" id="msgDiv">
								<div class="ui left icon input">
									<span style="color: red; align-content: center;" id="msg">用户名或密码不正确</span>
								</div>
							</div>


							<div class="ui fluid large teal  button" onclick="login()">登录</div>
						</div>

					</form>
					<div class="ui message">
						新用户？ <a href="register.html">注册</a>
					</div>
				</div>
			</div>

		</div>
	</div>


    <!--	/*/<th:block th:replace="fragment::script">/*/-->
    <script  src="js/jquery.min.js"></script>
    <script  src="js/semantic.min.js" ></script>
    <script  src="js/axios.js" ></script>
    <script  src="js/vue.min.js" ></script>
    <script  src="js/login.js" ></script>
    <!--    /*/</th:block>/*/-->

	<script>
		function login(){
			var username = $("#username").val();
			var password=$("#password").val();
			var values={};
			values.username=username;
			values.password=password;
			axios.post('http://localhost:8888/loginIn', values).then(function(res){
				var data = res.data;
				if (data.code == 200){
					localStorage.setItem('token', data.token);
					localStorage.setItem('username', data.username);
					localStorage.setItem('type', data.type);
					window.location.href="index.html"
				}else {
					$("#msg").html(data.msg);
					$("#msgDiv").show();
				}
			})
		}
	</script>
</body>
</html>
